Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Page with Scroll-Driven Animations</title>

<div id="menu" class="menu">
          <header class="inline">
            <div class="Logo">vigor.</div>
            <button
              id="closeMenuBtn"
              title="Close Menu"
              aria-label="Close Menu"
              class="NavButton"
            >
              <i class="ri-close-line"></i>
            </button>
          </header>

<a href="#" class="NavLink">Home</a>
          <a href="#schedules" class="NavLink">Schedules</a>
          <a href="#plans" class="NavLink">Plans</a>
          <a href="#about" class="NavLink">About</a>
        </div>

<button
          id="openMenuBtn"
          title="Open Menu"
          aria-label="Open Menu"
          class="NavButton"
        >
          <i class="ri-menu-line"></i>
        </button>
      </div>
    </nav>
    <main>
      <section id="home">
        <div class="hero">
          <div class="visual">
            <picture>
              <source
                srcset="
                 https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/landing-page-with-scroll-driven/assets/images/hero.webp
                "
                type="image/avif"
                media="(width > 1024px)"
              />
              <source
                srcset="
                  https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/landing-page-with-scroll-driven/assets/images/hero-mobile.avif
                "
                type="image/avif"
              />
              <source
                srcset="
                  https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/landing-page-with-scroll-driven/assets/images/hero.webp
                "
                media="(width > 1024px)"
                type="image/webp"
              />
              <img
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/landing-page-with-scroll-driven/assets/images/hero-mobile.webp"
                alt="fitness" 
              />
            </picture>
          </div>

<div class="content">
            <h1>Good Morning Champ</h1>
            <div class="wrapper">
              <a href="#discover" class="LinkButton Primary"> DISCOVER MORE </a>
            </div>
          </div>
        </div>

<div id="discover" class="fold">
          <div class="subject">
            <p>
              It's a new day,
              <span style="color: var(--brand-1)"
                >a new opportunity to sculpt the best version of yourself.
                Embrace the energy,</span
              >
              feel the burn, and conquer your fitness goals with unwavering
              determination.
            </p>
          </div>
        </div>
      </section>

<section id="schedules" class="schedule">
        <div class="subject">
          <div class="container">
            <div class="table-wrapper">
              <h2>Weekly Schedule</h2>
              <table>
                <tr>
                  <th>Day</th>
                  <th>Scheduled Exercise</th>
                  <th>Time</th>
                </tr>
                <tr>
                  <td>Monday</td>
                  <td>Running</td>
                  <td>6:00 AM</td>
                </tr>
                <tr>
                  <td>Tuesday</td>
                  <td>Swimming</td>
                  <td>7:00 AM</td>
                </tr>
                <tr>
                  <td>Wednesday</td>
                  <td>Cycling</td>
                  <td>6:30 AM</td>
                </tr>
                <tr>
                  <td>Thursday</td>
                  <td>Yoga</td>
                  <td>6:00 AM</td>
                </tr>
                <tr>
                  <td>Friday</td>
                  <td>Weight Training</td>
                  <td>8:00 AM</td>
                </tr>
              </table>
            </div>
            <div class="table-wrapper">
              <h2>Last 5 Exercises</h2>
              <table>
                <tr>
                  <th>Exercise</th>
                  <th>Duration</th>
                </tr>
                <tr>
                  <td>Running</td>
                  <td>30 min</td>
                </tr>
                <tr>
                  <td>Swimming</td>
                  <td>45 min</td>
                </tr>
                <tr>
                  <td>Cycling</td>
                  <td>60 min</td>
                </tr>
                <tr>
                  <td>Yoga</td>
                  <td>40 min</td>
                </tr>
                <tr>
                  <td>Weight Training</td>
                  <td>50 min</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="showcase">
          <video
            autoplay
            loop
            muted
            poster="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/landing-page-with-scroll-driven/assets/images/poster.webp"
            role="none"
          >
            <source src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/landing-page-with-scroll-driven/assets/demo.mp4" type="video/mp4" />
          </video>
          <img src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/landing-page-with-scroll-driven/assets/images/rhythm.png" alt="Rhythm" />
        </div>
      </section>

<section id="plans" class="cards">
        <div class="subject">
          <div class="container">
            <a href="#" class="Card">
              <i class="ri-trophy-line"></i>
              <div>
                <h2>Personal Bests</h2>
                <ul>
                  <li>Fastest 5K Run: 22 min</li>
                  <li>Heaviest Deadlift: 250 lbs</li>
                  <li>Longest Plank: 3 min</li>
                </ul>
              </div>
            </a>
            <a href="#" class="Card">
              <i class="ri-flag-2-line"></i>
              <div>
                <h2>Challenges</h2>
                <ul>
                  <li>30-Day Running Streak</li>
                  <li>1000 Pushups in a Month</li>
                  <li>Swim 20km in a Month</li>
                </ul>
              </div>
            </a>
            <a href="#" class="Card">
              <i class="ri-team-line"></i>
              <div>
                <h2>Friends Activity</h2>
                <ul>
                  <li>Jane just set a new record in cycling: 30 miles!</li>
                  <li>Mike completed the 30-Day Running Streak Challenge!</li>
                  <li>Anna shared a new workout: 'Hill Sprints Interval'.</li>
                </ul>
              </div>
            </a>
          </div>
        </div>
      </section>

<section id="about" class="about">
        <div id="target-word">love</div>
        <footer>
          <p>
            CodePen's homage to CSS Zen Garden, built by
            <a
              href="https://codepen.io/mobalti"
              style="color: var(--brand-1); text-decoration: none"
              >Arby</a
            >
            using Open Props.
          </p>
        </footer>
      </section>
    </main>
   
  </body> 
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import 'https://unpkg.com/open-props' layer(design.system);
@import 'https://unpkg.com/open-props/normalize.dark.min.css'
  layer(base.normalize);

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&display=swap');

@layer base.override-normalize {
  :root {
        view-transition-name: none;
    font-family: 'Oswald', sans-serif;

--font-size-0: 0.875rem;
    --radius-3: 8px;

--surface-1: oklch(0 0 0);
    --surface-2: oklch(0.19 0 0);
    --surface-3: oklch(0.24 0 0 / 0.1);
    --surface-4: oklch(0.45 0 0);
    --text-1: oklch(1 0 0);
    --text-2: oklch(0.51 0 0);
    --brand-1: oklch(0.65 0.24 18.89);
    --brand-2: oklch(0.78 0.11 84.63);

--container: 1600px;
    --nav-block-size: 6.2rem;

--gap: var(--size-8);
  }
  li {
    padding: 0;
  }

a {
    margin: 0;
    max-inline-size: unset;
  }

h1,
  h2,
  h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: normal;
  }
}

@layer containers {
  .Navbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--layer-3);
    background-color: var(--surface-1);
    block-size: var(--nav-block-size);

.container {
      display: flex;
      margin-inline: auto;
      max-inline-size: var(--container);
      align-items: center;
      justify-content: space-between;
      padding-inline: var(--size-3);
    }

@media (width > 768px) {
      #openMenuBtn {
        display: none;
      }
    }

.menu {
      list-style: none;
      display: flex;
      background-color: var(--surface-1);

> header {
        display: flex;
        justify-content: space-between;
        inline-size: 100%;
        padding-inline: var(--size-3);
        border-bottom: var(--border-size-2) solid var(--text-1);
      }

@media (width < 768px) {
        flex-direction: column;
        align-items: start;
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        inline-size: 100%;
        gap: var(--size-7);

display: none;
        &.open {
          display: flex;
        }
      }

@media (width >= 768px) {
        gap: var(--gap);
        > header {
          display: none;
        }
      }
    }
  }
  main {
    display: grid;
    margin-inline: auto;
  }

section .container {
    max-inline-size: 1200px;
    padding-inline: var(--size-3);
    padding-block: var(--size-12);
    display: grid;
    gap: var(--gap);
    place-content: center;
    margin-inline: auto;
    padding-inline: var(--size-3);
  }

.hero {
    display: grid;
    align-items: center;

> * {
      grid-area: 1/1;
    }

& h1 {
      text-align: center;
      font-family: 'Bebas Neue', sans-serif;
      font-weight: normal;
      font-size: 7rem;
      text-transform: uppercase;
    }

& p {
      max-inline-size: 25ch;
      font-size: var(--font-size-4);
      color: var(--surface-1);
      text-align: center;
      display: none;
    }

.visual {
      background: var(--gradient-8);

block-size: calc(100dvh - var(--nav-block-size));
      overflow: hidden;

& img {
        object-fit: cover;
        inline-size: 100%;
        block-size: 100%;
      }
    }

:is(picture, img) {
      inline-size: 100%;
      block-size: 100%;
    }

.content {
      display: grid;
      place-items: center;
    }

@media (width < 768px) {
      .content {
        gap: var(--size-3);
      }
      & h1 {
        font-size: var(--font-size-8);
        max-inline-size: var(--size-content-1);
        line-height: var(--font-lineheight-0);
      }
    }
  }

.fold {
    display: grid;
    justify-content: center;
    padding: var(--size-10);

& p {
      text-align: center;
      font-size: var(--font-size-7);
      max-inline-size: var(--size-content-2);
      @media (width < 768px) {
        font-size: var(--font-size-fluid-3);
      }
    }
  }

.schedule {
    & h2 {
      font-size: var(--font-size-7);
      color: var(--brand-1);
      text-transform: uppercase;
    }

& table {
      border: 3px solid var(--surface-1);
      inline-size: 100%;
    }

.table-wrapper {
      display: grid;
      justify-items: center;
      gap: calc(var(--gap) / 2);
    }

& tr:hover td {
      color: var(--brand-1);
       background-color: white;
    }

@media (width > 768px) {
      .container {
        grid-template-columns: 1fr 1fr;
        gap: var(--size-10);
      }
    }
  }

.showcase {
    display: grid;
    overflow: hidden;
    background-color: var(--surface-1);

> * {
      grid-area: 1/1;
    }
    > video {
      display: block;
      inline-size: 100%;
    }
    > img {
      z-index: 1;
    }
  }

.cards {
    @media (width > 768px) {
      .container {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
  }

.about {
    background-color: var(--surface-1);
    padding-inline: var(--size-3);

display: grid;
    grid-template-rows: 1fr auto;
    justify-content: center;
    min-block-size: 100dvh;
    padding-block-end: var(--size-8);
    place-content: center;
    text-align: center;

#target-word {
      font-size: var(--font-size-8);
      align-self: center;
    }

& footer {
      & p {
        color: var(--text-2);
        text-wrap: balance;
      }
    }
  }
}

@layer components {
  .Card {
    display: grid;
    background-color: var(--surface-1);
    color: var(--text-1);
    gap: calc(var(--gap) / 2);
    align-content: start;

text-decoration: none;
    transition: background-color 0.2s var(--ease-2);
    padding: var(--size-8);
    border-radius: var(--radius-3);

& h2 {
      font-size: var(--font-size-5);
    }

& ul {
      padding: var(--size-3);
    }

& i {
      font-size: var(--font-size-5);

/* VisBug ♥ */
      margin-inline-start: var(--size-00);
    }

& li {
      text-wrap: balance;
    }

&:hover {
      background-color: hsl(0, 0%, 33%);
    }
  }

.Button,
  .LinkButton {
    display: inline-flex;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;

color: var(--text-1);
    padding: calc(var(--size-2) + var(--border-size-1))
      calc(var(--size-2) + var(--border-size-2));

padding: calc(var(--size-2) + var(--border-size-1))
      calc(var(--size-4) + var(--border-size-2));

font-size: 1.25rem;
    min-inline-size: 13ch;
    transition: 0.2s ease;
    background-color: var(--surface-2);
    border: 1px solid var(--surface-2);

&.Primary {
      border-color: var(--brand-1);
      background-color: var(--brand-1);
      &:hover {
        border-color: var(--text-1);
        background-color: var(--text-1);
        color: var(--brand-1);
      }
    }

&.secondary {
      border-color: var(--text-1);
      background-color: var(--text-1);
      color: var(--brand-1);
      &:hover {
        border-color: var(--brand-1);
        background-color: var(--brand-1);
        color: var(--text-1);
      }
    }
  }

.NavLink {
    color: var(--text-1);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-5);
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--border-size-2);
    text-underline-offset: 0.5ex;
    text-decoration: none;
    transition: color 200ms ease;

/* &:hover {
      text-decoration: underline;
    } */

&:hover {
      color: var(--brand-1);
    }

&:target {
      color: var(--brand-1);
    }

@media (width < 768px) {
      font-size: var(--font-size-5);
      padding-inline: var(--size-4);
    }
  }

.Logo {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: var(--font-weight-9);

font-size: 4.5rem;
    font-size: calc(var(--font-size-8) + var(--font-size-1));
  }

.NavButton {
    padding: var(--size-2);
    background-color: var(--surface-1);
    > i {
      font-size: var(--font-size-6);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @layer animation.scroll-driven {
    .showcase {
      view-timeline: --showcase;

> img {
        animation: fade-overlay linear both;
        animation-timeline: --showcase;
        animation-range: 20% 40%;
        transform-origin: top center;
      }
    }

.schedule {
      animation: to-white linear both;
      animation-timeline: view();
      animation-range-start: 4%;
      animation-range-end: 10%;
    }

.cards {
      animation: to-brand linear both;
      animation-timeline: view();
      animation-range-start: 4%;
      animation-range-end: 16%;
    }

.about {
      background-color: hsl(349 100% 58%);
      animation: to-black linear both;
      animation-timeline: view();
      animation-range-start: 4%;
      animation-range-end: 16%;
    }
    @keyframes fade-overlay {
      to {
        scale: 3.5;
        opacity: 0;
      }
    }
    /* Avoiding custom properties to ensure the animation remains on the compositor for optimal performance. */
    @keyframes to-brand {
      to {
        background-color: hsl(349 100% 58%);
      }
    }

@keyframes to-white {
      to {
        background-color: white;
      }
    }

@keyframes to-black {
      to {
        background-color: black;
      }
    }
  }

@layer animation.reveal {
    .subject {
      opacity: 0;
    }

.reveal-up {
      animation: fade-in 660ms ease forwards,
        slide-up 1000ms cubic-bezier(0, 0, 0.1, 1) forwards;
    }

.reveal-down {
      animation: fade-in 660ms ease forwards,
        slide-down 1000ms cubic-bezier(0, 0, 0.1, 1) forwards;
    }

@keyframes fade-in {
      to {
        opacity: 1;
      }
    }

@keyframes slide-up {
      from {
        transform: translateY(-100px);
      }
    }

@keyframes slide-down {
      from {
        transform: translateY(100px);
      }
    }
  }

@layer animation.navbar {
    .Navbar {
      transition: transform 0.4s var(--ease-2);
      [scroll-direction='down'] & {
        transform: translateY(-200%);
      }
    }
  }

@layer animation.scroll-driven.active-link {
    body {
      timeline-scope: --home, --schedules, --plans, --about;
    }

#home {
      view-timeline-name: --home;
    }

#schedules {
      view-timeline-name: --schedules;
    }
    #plans {
      view-timeline-name: --plans;
    }

#about {
      view-timeline-name: --about;
    }

.NavLink[href='#'] {
      animation-timeline: --home;
    }

.NavLink[href='#schedules'] {
      animation-timeline: --schedules;
    }

.NavLink[href='#plans'] {
      animation-timeline: --plans;
    }

.NavLink[href='#about'] {
      animation-timeline: --about;
    }

.NavLink {
      animation: highlight linear both;
    }

@keyframes highlight {
      0%,
      100% {
        color: white;
      }
      30%,
      70% {
        color: hsl(349 100% 58%);
      }
    }
  }

@layer animation.navbar.sm-screen {
    body:has(.menu.open) {
      overflow-y: hidden;
    }

@media (prefers-reduced-motion: no-preference) {
      @media (width < 768px) {
        .menu {
          view-transition-name: menu;
        }

::view-transition-old(menu) {
          animation: var(--animation-slide-out-right);
        }

::view-transition-new(menu) {
          animation: var(--animation-slide-in-left);
        }
      }
    }
  }
}

@supports not (animation-timeline: scroll()) {
  .schedule {
    background-color: white;
  }
  .cards {
    background-color: var(--brand-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .schedule {
    background-color: white;
  }

.showcase {
    display: none;
  }

.cards {
    background-color: var(--brand-1);
  }
}

console.log("Event Fired")
const openMenuBtn = document.querySelector('#openMenuBtn');
const closeMenuBtn = document.querySelector('#closeMenuBtn');
const menu = document.querySelector('#menu');

openMenuBtn.addEventListener('click', () => {
  handleViewTransition(openMenu);
});

closeMenuBtn.addEventListener('click', () => {
  handleViewTransition(closeMenu);
});

// Close menu by Press Escape(ESC)
function handleCloseWithESC(e) {
  if (e.key == 'Escape') {
    handleViewTransition(closeMenu);
  }
}

function openMenu() {
  menu.classList.add('open');
  closeMenuBtn.focus();
  window.addEventListener('keyup', handleCloseWithESC);
}

function closeMenu() {
  menu.classList.remove('open');
  openMenuBtn.focus();
  window.removeEventListener('keyup', handleCloseWithESC);
}

function handleViewTransition(updateDom) {
  if (!document.startViewTransition) updateDom();
  else document.startViewTransition(() => updateDom());
}

document.querySelectorAll('.NavLink').forEach((link) => {
  link.addEventListener('click', () => handleViewTransition(closeMenu));
});

//  Scroll Animation

let scrollDirection;
const nav = document.querySelector('.Navbar');
document.addEventListener(
  'scroll',
  (e) => {
    const st = window.pageYOffset || document.documentElement.scrollTop;
    const direction = st > e.target.lastScrollTop ? 'down' : 'up';
    if (Math.abs(st - e.target.lastScrollTop) > 5)
      document.body.setAttribute('scroll-direction', direction);
    scrollDirection = direction;
    e.target.lastScrollTop = st <= 0 ? 0 : st;
  },
  {
    passive: true,
  }
);

function addRevealEffect(elements) {
  const observer = new IntersectionObserver(
    (entries) => {
      let revealClass;
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          revealClass = scrollDirection === 'up' ? 'reveal-up' : 'reveal-down';

entry.target.classList.add(revealClass);
        } else {
          entry.target.className = 'subject';
        }
      });
    },
    { threshold: 0.1 }
  );

elements.forEach((element) => {
    observer.observe(element);
  });
}

const elementsToReveal = document.querySelectorAll('.subject');
addRevealEffect(elementsToReveal);

//  About Text Replace

const NORMAL_PLAYBACK_RATE = 200;
const REDUCED_PLAYBACK_RATE = 1000;

let rate = NORMAL_PLAYBACK_RATE;

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mediaQuery.matches) rate = REDUCED_PLAYBACK_RATE;

const words = [
  'passion',
  'success',
  'goals',
  'rhythm',
  'fun',
  'energy',
  'opportunity',
];

textReplace(words, 'target-word', rate);

function textReplace(words, targetElement, rate) {
  let wordIndex = 0;

const randomWordElement = document.getElementById(targetElement);

const changeWordWithAnimation = () => {
    randomWordElement.style.opacity = 0; // Fade out
    setTimeout(function () {
      wordIndex = (wordIndex + 1) % words.length;
      randomWordElement.textContent = words[wordIndex];
      randomWordElement.style.opacity = 1; // Fade in
    }, 50);
  };

const interval = setInterval(changeWordWithAnimation, rate);
}

Frontend Forever App